<template>
    <div class="zbrand">
      <ul class="zbrand_list">
        <li>
          <div class="li_top" id="zbrand1">A</div>
          <dl>
            <dd class="clearFloat">
              <div class="ig fl"><img src="images/brand1.png" /></div>
              <div class="fon fr"><span>奥迪</span></div>
            </dd>
          </dl>
        </li>
        <li>
          <div class="li_top" id="zbrand2">B</div>
          <dl>
            <dd class="clearFloat">
              <div class="ig fl"><img src="images/benchi.png" /></div>
              <div class="fon fr"><span>奔驰</span></div>
            </dd>
          </dl>
          <dl>
            <dd class="clearFloat">
              <div class="ig fl"><img src="images/baoma.png" /></div>
              <div class="fon fr"><span>宝马</span></div>
            </dd>
          </dl>
        </li>
        <li>
          <div class="li_top" id="zbrand4">D</div>
          <dl>
            <dd class="clearFloat">
              <div class="ig fl"><img src="images/daoqi.jpg" /></div>
              <div class="fon fr"><span>道奇</span></div>
            </dd>
          </dl>
        </li>
        <li>
          <div class="li_top" id="zbrand6">F</div>
          <dl>
            <dd class="clearFloat">
              <div class="ig fl"><img src="images/ford.jpg" /></div>
              <div class="fon fr"><span>福特</span></div>
            </dd>
          </dl>
        </li>
        <li>
          <div class="li_top" id="zbrand12">L</div>
          <dl>
            <dd class="clearFloat">
              <div class="ig fl"><img src="images/luhu.png" /></div>
              <div class="fon fr"><span>路虎</span></div>
            </dd>
          </dl>
        </li>
        <li>
          <div class="li_top" id="zbrand13">M</div>
          <dl>
            <dd class="clearFloat">
              <div class="ig fl"><img src="images/mashaladi-logo.jpg" /></div>
              <div class="fon fr"><span>玛莎拉蒂</span></div>
            </dd>
          </dl>
        </li>
        <li>
          <div class="li_top" id="zbrand14">N</div>
          <dl>
            <dd class="clearFloat">
              <div class="ig fl"><img src="images/nissan.jpg" /></div>
              <div class="fon fr"><span>尼桑</span></div>
            </dd>
          </dl>
        </li>
        <li>
          <div class="li_top" id="zbrand16">P</div>
          <dl>
            <dd class="clearFloat">
              <div class="ig fl"><img src="images/baoshiji.png" /></div>
              <div class="fon fr"><span>保时捷</span></div>
            </dd>
          </dl>
        </li>
        <li>
          <div class="li_top" id="zbrand20">T</div>
          <dl>
            <dd class="clearFloat">
              <div class="ig fl"><img src="images/toyota.png" /></div>
              <div class="fon fr"><span>丰田</span></div>
            </dd>
          </dl>
        </li>
      </ul>
      <div class="zbrand_select">
        <ul>
          <li><a href="#zbrand1">A</a></li>
          <li><a href="#zbrand2">B</a></li>
          <li><a href="#zbrand4">D</a></li>
          <li><a href="#zbrand6">F</a></li>
          <li><a href="#zbrand12">L</a></li>
          <li><a href="#zbrand13">M</a></li>
          <li><a href="#zbrand14">N</a></li>
          <li><a href="#zbrand16">P</a></li>
          <li><a href="#zbrand20">T</a></li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "brand"
    }
</script>

<style lang="scss"  scoped>
  @import "../../style/common";
  @import "../../style/mixin";
  .zbrand .zbrand_list{margin-bottom: 1.2rem;}
  .zbrand .zbrand_list li .li_top{height: 0.58rem;line-height: 0.58rem;padding: 0 0.3rem;color: #333;font-size: 0.25rem;}
  .zbrand .zbrand_list li dl{background: #fff;}
  .zbrand .zbrand_list li dl dd:hover{background: #F4F4F4;}
  .zbrand .zbrand_list li dl dd .ig{height: 1.05rem;line-height: 1.05rem;}
  .zbrand .zbrand_list li dl dd .ig img{width: 0.66rem;vertical-align: middle;margin-left: 0.3rem;}
  .zbrand .zbrand_list li dl dd .fon{height: 1.05rem;line-height: 1.05rem;width: 6.1rem;border-bottom: solid 1px #f4f4f4;color: #333;font-size: 0.28rem;}
  .zbrand .zbrand_list li dl dd:last-child .fon{border-bottom: none;}
  .zbrand .zbrand_select{position: fixed;right: 0;top: 1rem;z-index: 100;}
  .zbrand .zbrand_select ul li{width: 0.5rem;height: 0.36rem;line-height: 0.36rem;text-align: center;}
  .zbrand .zbrand_select ul li a{color: #333;font-size: 0.2rem;}
  .zbrand .zbrand_select ul li a:hover{font-weight: bold;}
</style>
